<template>
    <!--面包屑-->
<div style="margin-bottom: 30px">
 <el-breadcrumb separator="/">
   <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>
    <router-link to="/Expense">费用管理</router-link>
   </el-breadcrumb-item>
   <el-breadcrumb-item>费用显示</el-breadcrumb-item>
 </el-breadcrumb>
</div>

    <h2>费用记录</h2> 
    <el-form :inline="true" :model="from" class="demo-form-inline">
    <el-form-item label="负责人">
         <el-input v-model="from.ExpenseHead" placeholder="选择负责人" clearable />
       </el-form-item>
       <el-form-item label="使用日期">
           <el-date-picker
           v-model="from.ExpenseDate"
           type="date" value-format="YYYY-MM-DD"
           placeholder="费用日期"
           clearable
         />
       </el-form-item>
       <el-form-item label="车牌号">
         <el-input v-model="from.licensePlateNumber" placeholder="车牌号" clearable />
       </el-form-item>
      </el-form>  
       <el-button size="small" type="primary" @click="Expeenshow()" >查询</el-button>
       <el-button size="small" type="primary"  @click="Add()">新增</el-button>
       <el-button size="small" type="primary" @click="Dels()"  >批量删除</el-button>
       <el-button size="small" type="primary" @click="chong()"  >重置</el-button>
       <el-button size="small" type="primary" @click="getExport()" >导出</el-button>
    <el-table :data="tableData" style="width: 100%"  @selection-change="handleSelectionChange">
      <el-table-column type="selection"  width="55" />
       <el-table-column prop="expenseTitle" label="费用标题" width="100" />
       <el-table-column prop="expenseType" label="费用类型" width="100" />
       <el-table-column prop="licensePlateNumber" label="车牌号" width="100" />
       <el-table-column prop="expensePrice" label="金额" width="100" />
       <el-table-column prop="expenseHead" label="负责人" width="100" />
       <el-table-column prop="expenseDesc" label="描述" width="100" />
       <el-table-column prop="expenseDate" label="使用日期" width="100" >
        <template #default="scope">
          <span v-if="scope.row.expenseDate">{{ scope.row.expenseDate.substring(0,10) }}</span>
      </template>
       </el-table-column>
       <el-table-column prop="expenseRemark" label="备注" width="100" />
       <el-table-column prop="createdDate" label="创建时间" width="100" >
        <template #default="scope">
        <span v-if="scope.row.createdDate == null ? '' : scope.row.createdDate">{{
                    scope.row.createdDate.substring(0, 10) }}</span>
      </template>
       </el-table-column>
       <el-table-column  label="操作" width="200" >
        <template #default="scope">
           <el-button size="small" @click="Update(scope.row.expenseId)">编辑</el-button>
             <el-button size="small" type="danger" @click="Del()">删除</el-button>
             <el-button size="small" type="primary" @click="Look(scope.row.expenseId)">查看</el-button>
            </template>
       </el-table-column>
     </el-table>
     <el-pagination
      v-model:current-page="page.Pageindex"
      v-model:page-size="page.Pagesize"
      :page-sizes="[3, 6, 9, 11]"
       layout="total, sizes, prev, pager, next, jumper"
      :total="page.TotalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
   
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="1300"
   
  >
    <span>
     <table>
      <thead>
        <tr>
          <th>费用标题</th>
          <th>费用类型</th>
          <th>车牌号</th>
          <th>金额</th>
          <th>负责人</th>
          <th>描述</th>
          <th>使用日期</th>
          <th>备注</th>
          <th>创建时间</th>
       
        </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{backfill.expenseTitle}}</td>
      <td>{{backfill.expenseType}}</td>
      <td>{{backfill.licensePlateNumber}}</td>
      <td>{{backfill.expensePrice}}</td>
      <td>{{backfill.expenseHead}}</td>
      <td>{{backfill.expenseDesc}}</td>
      <td>{{backfill.expenseDate}}</td>
      <td>{{backfill.expenseRemark}}</td>
      <td>{{backfill.createdDate}}</td>
       </tr>
  </tbody>
 
     </table>
  


    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
       
      </div>
    </template>
  </el-dialog>
    
   </template>
       
   <script setup lang='ts'>
   import axios  from 'axios';
   import { ElMessage, ElMessageBox } from 'element-plus'
     import { ref, reactive, onMounted,watch } from 'vue';
     import { useRouter } from 'vue-router';
     const dialogVisible = ref(false)
     const router = useRouter();
     const from=reactive({
      ExpenseHead:'',
      ExpenseDate:'',
      licensePlateNumber:''
     })
     const multipleSelection = ref([])
  const multipleSelections = ref([])
 //多选用于批删
 const handleSelectionChange = (val:any) => {
  multipleSelection.value=(val.map(o=>o.expenseId))
 console.log(val)
multipleSelections.value = val//多选整条数据
}
//导出
import * as XLSX from 'xlsx';// 导出Excel
const getExport = () => {
  // let url = '/bread/api/CargoOwners/GetExcelName?CargoOwnerName='+forms.CargoOwnerName+'&CargoOwnerPhone='+forms.CargoOwnerPhone+'&DriverLicenseDate='+forms.DriverLicenseDate+'&PageIndex='+page.PageIndex+'&PageSize='+page.PageSize
  // window.location.href = url;
    //  this.selectdata 是复选框的 数据列表
        if (multipleSelections.value.length <= 0) {
            ElMessage.warning('请选择数据！');
            return;
        }
        let tableData = [
            ['序号','费用标题','费用类型', '车牌号', '金额',"负责人","描述","使用日期","备注","创建时间"]//导出表头
        ] // 表格表头
        multipleSelections.value.forEach((item, index) => {
            let rowData= []
            //导出内容的字段
            rowData = [
                index + 1, 
                item.expenseTitle,
              item.expenseType,
                  item.licensePlateNumber,
                item.expensePrice,
              item.expenseHead,
              item.expenseDesc,
              item.expenseDate,
              item.expenseRemark,
             item.createdDate
             ]
            tableData.push(rowData)
        })
        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
        let bookNew = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(bookNew, workSheet, '作品名称') // 工作簿名称
        let name = '费用记录' + timeFormat() + '.xlsx'
        XLSX.writeFile(bookNew, name) // 保存的文件名
 
}
const timeFormat=()=> {
        let time = new Date();
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let date = time.getDate();
        let hours = time.getHours();
        let minutes = time.getMinutes();
        let seconds = time.getSeconds();
        return year + '-' + addZero(month) + '-' + addZero(date) + ' ' + addZero(hours) + ':' + addZero(minutes) + ':' + addZero(seconds);
}
const addZero=(num:any)=> {
    return num < 10 ? '0' + num : num
}
   
     const chong=()=>{
       from.ExpenseHead='',
       from.ExpenseDate='',
       from.licensePlateNumber='',
       window.location.reload()

     }
       const tableData = ref([])
       onMounted(() => {
           Expeenshow()
       })
       //分页
    const page=reactive({
    Pageindex:1,
    Pagesize:2,
    TotalCount:0,
    PageCount:0

   })
   //显示
       const Expeenshow = () => {
        axios.get('/carread/api/Expense/ShowExpen',{
          params:{
            ExpenseHead:from.ExpenseHead,
            ExpenseDate:from.ExpenseDate,
            licensePlateNumber:from.licensePlateNumber,
            Pageindex:page.Pageindex,
            Pagesize:page.Pagesize
          }}
         ).then(res => {
            tableData.value = res.data.data.list
            page.TotalCount=res.data.data.totalCount
            page.PageCount=res.data.data.pageCount
            console.log(res.data.data.list);
        })
       }
       //新增
       const Add=()=>{
    router.push("/ExpenseAdd")
       }
       //批量删除
       const Dels=()=>{
      if (multipleSelection.value.length == 0) { 
        ElMessage.error('请选择要删除的数据')
        return
    }
           ElMessageBox.confirm(
    '您确定要删除吗？',
    '删除费用记录',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(multipleSelection.value)
      axios.post('/carwrite/api/Expense/DeleteAllExpensoRecord',{
        ids:multipleSelection.value
        }).then(res=>{
          console.log(res)
          if(res.data.data==1){
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            Expeenshow()
          }
        })

    })
       }
       //编辑
       const Update=(expenseId:number)=>{
    router.push({
      path:'/ExpenseUpdate',
      query:{
        expenseId:expenseId
      }
    })
       }
       //删除
       const Del=()=>{
        ElMessageBox.confirm(
    '您确定要删除吗？',
    '删除费用记录',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post('/carwrite/api/Expense/DeleteAllExpensoRecord',{
        ids:multipleSelection.value
        }).then(res=>{
          console.log(res)
          if(res.data.data==1){
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            Expeenshow()
          }
        })

    })
       }
  const backfill=ref({})
const Look =(expenseId:number)=>{
  console.log(expenseId)
  dialogVisible.value=true
  axios.get('/carread/api/Expense/ExpenRecord', {
        params: {
          ExpenseId: expenseId
        }
      }).then(res => {
      backfill.value=res.data.data
      console.log(res.data)
       
    })
  }
        //分页
const handleSizeChange = (val:any) => {
    page.Pagesize=val;
    Expeenshow();
  }
  const handleCurrentChange = (val:any) => {
    page.Pageindex=val;
    Expeenshow();
  } 
   </script>
       
   <style>
       
   </style>